<template>
  <el-checkbox-group v-model="checks" :min="min" :max="max" @change="handleChange">
    <div class="checkArea">
      <div v-for="(item, index) in list" :key="index" class="check-item">
        <el-checkbox :label="item[keyValue]">{{ formatText(item) }}</el-checkbox>
      </div>
    </div>
  </el-checkbox-group>
</template>
<script>
/**
 * 列表下拉选择
 * 接口获取数据，静态数据
 */
import request from '@/utils/request.js';
export default {
  name: 'SelectComponent',
  props: {
    value: {
      type: [String, Number, Array],
      default: '',
    },
    lists: {
      type: Array,
      default: () => {
        return [];
      },
    },
    keyLabel: {
      type: String,
      default: 'label',
    },
    keyValue: {
      type: String,
      default: 'value',
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 99,
    },
    disabled: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selectRemote: {
      type: Boolean,
      default: false,
    },
    selectOptions: {
      type: Object,
      default() {
        return {
          url: '/manager/admin/system/datadictList',
          data: {},
          returnData: undefined,
          method: 'post',
          optionsValue: 'value',
          optionsLabel: 'name',
          optionsKey: 'value',
        };
      },
    },
  },
  data() {
    return {
      checks: [],
      list: [],
    };
  },
  watch: {
    value(v) {
      if (v) {
        this.checks = Array.isArray(v) ? v : v.split(',');
      } else {
        this.checks = [];
      }
    },
    lists: {
      handler(v) {
        this.list = v;
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.selectRemote) {
      this.getList();
    }
  },
  methods: {
    formatText(data) {
      // 数据字典格式不统一，目前name 可能为 item.label || item.name，直接加入 .name 兼容适应
      if (data[this.keyLabel] === undefined) {
        return data.name;
      }
      return data[this.keyLabel];
    },
    handleChange(v) {
      this.$emit('input', v.join(','));
      // 用在table、detailTable、chooseTable等表格组件中，单选时才执行
      if (this.min === 0 && this.max === 1) {
        this.$emit('changeSearch');
      }
    },
    getList() {
      if (!this.loading) {
        this.loading = true;

        request(this.selectOptions.url, this.selectOptions.method, this.querydata())
          .then((r) => {
            this.loading = false;
            var _data = [];
            if (typeof this.selectOptions.returnData === 'function') {
              _data = this.selectOptions.returnData(r.data);
            } else {
              _data = r.data;
            }
            if (_data.length > 0) {
              this.list = this._result([...this.list, ..._data.filter((res) => res.id !== this.value)]);
            }
          })
          .catch((e) => {
            this.loading = false;
          });
      }
    },
    _result(ary) {
      if (this.disabled.length > 0) {
        return ary.map((r) => {
          r.disabled = this.disabled.indexOf(r[this.selectOptions.optionsValue]) > -1;
          return r;
        });
      }
      return ary;
    },
    querydata() {
      let data = {};
      let str = {};
      str = {
        ...this.selectOptions.data,
      };
      if (!!this.selectOptions.method && this.selectOptions.method === 'post') {
        data = {
          method: 'post',
          data: str,
        };
      } else {
        data = {
          method: 'get',
          params: str,
        };
      }
      return data;
    },
  },
};
</script>
<style lang="scss" scoped></style>
